<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            text-align: center;
        }

        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<div>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button class="run">运行</button>
    <button class="save">保存</button>
    <button class="restore">还原</button>
    <button class="up">上</button>
    <button class="down">下</button>
    <button class="left">左</button>
    <button class="right">右</button>
    <button class="clear">擦除</button>
    <button class="reset">重置</button>
</div>
<canvas width="600" height="600"></canvas>
<script>
    var cas = document.querySelector("canvas");
    var ctx = cas.getContext("2d");
    var textarea = document.querySelector("textarea");
    var run = document.querySelector(".run");
    var save = document.querySelector(".save");
    var restore = document.querySelector(".restore");
    var up = document.querySelector(".up");
    var down = document.querySelector(".down");
    var left = document.querySelector(".left");
    var right = document.querySelector(".right");
    var clear = document.querySelector(".clear");
    var reset = document.querySelector(".reset");

    ctx.strokeRect(50, 50, 50, 50)
    //  点击保存按钮保存
    save.onclick = function () {
        ctx.save();
    }
    restore.onclick = function () {
        ctx.restore();

    }
    //  点击向上按钮，向上位移
    up.onclick = function () {
        ctx.translate(0, -10)
    }

    down.onclick = function () {
        ctx.translate(0, 10)
    }

    left.onclick = function () {
        ctx.translate(-10, 0)
    }

    right.onclick = function () {
        ctx.translate(10, 0)
    }

    //点击清除
    clear.onclick=function(){
        //擦除 要注意可能坐标系可能会改变
//        不能把坐标还原回去最开始的位置
//        不能把线条属性还原回去最开始的位置
        ctx.clearRect(-1000,-1000,10000,10000)
    }

    reset.onclick=function(){
//        可以重置坐标系
//        可以重置线条属性
//        就好像重新创建了一次canvas标签一样
        cas.width=cas.width;
    }


//让它一直在画，点击位移键的时候就改变它的位置而已
    setInterval(function () {
        ctx.strokeRect(50, 50, 50, 50)
    }, 100)


</script>

</body>
</html>